<template>
	<view>
		<!-- 地址 -->
		<view class="address">
			<view class="addMy"  @tap="selectAddress">
				<view class="middle">
					<view class="" v-if="!addressInfo">
						请选择收货地址
					</view>
					<view class=""  v-else>
						<view class="top">{{addressInfo.address}}</view>
						<view class="btm">{{addressInfo.name}} {{addressInfo.mobile}}</view>
					</view>
				</view>
				<view class="right" style="color: #ccc;">></view>
			</view>
		</view>
    <!-- 多个商品 -->
    <view class="douList" v-if=" pagetype == 2 ">
      <view class="goodsdata">
        <view v-for="(item,index) in infoList" :key="index">
          <view class="circle_top">
            <view class="circle_top_img">
              <image :src="item.image"  mode="aspectFill"></image>
            </view>
            <view class="cirleMiddle">
              <view class="circle_top_texts">
                <view>{{item.name}}</view>
              </view>
              <view class="circle_top_text">{{item.item_name}} ×{{item.num}}</view>
              <view class="circle_top_text mount">￥{{item.price}}
              </view>

            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="pagetype == 2">
      <view class="douTop" >
        <view class="" style="color: #999;">配送</view>
        <view class="distri">商家配送</view>
      </view>
      <view class="douBtm">
        <view class=""><text>合计：￥</text>{{allMoney}}</view>
      </view>
    </view>
		<!-- 商品 -->
		<view class="detailList" v-if="pagetype == 1">
			<view class="circle_top">
				<view class="circle_top_img">
					<image :src="shopList.image"  mode="aspectFill"></image>
				</view>
				<view class="cirleMiddle">
					<view class="circle_top_texts">
						<view>{{shopList.name}}</view>
					</view>
					<view class="circle_top_text">{{shopList.item_name}} ×{{shopList.num}}</view>
					<view class="circle_top_text mount" v-if="shopList.category_id !=2">￥{{pricest}}
						<!-- <text class="circle_top_text" style="text-decoration: line-through;margin-left: 10px;color: #999;">
							￥{{shopList.market_price}}
						</text> -->
					</view>
          <view class="circle_top_text mount" v-if="shopList.category_id ==2">{{pricest}}个
            <!-- <text class="circle_top_text" style="text-decoration: line-through;margin-left: 10px;color: #999;">
              ￥{{shopList.market_price}}
            </text> -->
          </view>
				</view>
			</view>
			<view class="detailTop" v-if="shopList.category_id !=2">
				<view class="" style="color: #999;">配送</view>
				<view class="distri">商家配送</view>
			</view>
			<!-- <view class="detailTop" @click="show=true">
				<view class="" style="color: #999;">优惠券</view>
				<view class="distri">{{youhuiquan}}</view>
			</view> -->
			<view class="detailBtm">
				<view class="" v-if="shopList.category_id !=2" ><text>合计：￥</text>{{pricest}}</view>
        <view class="" v-if="shopList.category_id ==2"><text>合计：</text>{{pricest}}个</view>
			</view>
		</view>
		<!-- 支付方式 -->
		<view class="drawBox"  v-if=" pagetype == 1  && shopList.category_id == 2 ">
			<view class="payMent">支付方式</view>
			<view class="pay-item" :class="{ xuan : cur2 == index }" v-for="(value,index) in fenTypeList" :key="index"
				@tap="cur2 = index">
				<!-- <image :src="value.img"></image> -->
				<text>{{ value.name }}</text>
        <text v-if="index==0">({{info.integral}})</text>
				<!-- <text v-if="index==">({{info.red_num}})</text> -->
				<image class="xuan" v-if="cur2 == index" src="../../static/xuan.png"></image>
				<image class="noxuan" v-else src="../../static/noChoose.png"></image>
			</view>
		</view>

    <view class="drawBox" v-else>
      <view class="payMent">支付方式</view>
      <view class="pay-item" :class="{ xuan : cur2 == index }" v-for="(value,index) in payTypeList" :key="index"
            @tap="cur2 = index">
        <!-- <image :src="value.img"></image> -->
        <text>{{ value.name }}</text>
        <!--        <text v-if="index==0">({{info.integral}})</text>-->
        <!-- <text v-if="index==">({{info.red_num}})</text> -->
        <image class="xuan" v-if="cur2 == index" src="../../static/xuan.png"></image>
        <image class="noxuan" v-else src="../../static/noChoose.png"></image>
      </view>
    </view>
		
		
		
		
		<view class="vipBtm">
			<view class="vipMoneys" v-if="pagetype == 1">
				<text style="font-size: 24rpx;" v-if="shopList.category_id !=2">￥</text>{{pricest}}
        <text style="font-size: 24rpx;" v-if="shopList.category_id ==2">个</text>
			</view>
      <view class="vipMoneys" v-if="pagetype == 2">
        <text style="font-size: 24rpx;">￥</text>{{allMoney}}
      </view>
			<view class="vipBtn" @tap="open()">
				提交订单
			</view>
		</view>
		<!-- 选择优惠券弹窗 -->
		<!-- 优惠活动 -->
		<u-popup v-model="show" mode="bottom" border-radius="14" closeable height="1000rpx">
			<view class="youhuiPop">
				<view class="c-999 title">优惠券</view>
				<view class="">
					<view class="display just_space youhq" v-for="(item,index) in youhuiqList"  :key="index">
						<view class="display">
							<view class="p_right_10" style="text-align: center;">
								<view class="fw-b price"  >
									<text>￥</text>
									<text class="ft_24">{{item.coupon_price}}</text>
								</view>
								<!-- <view class="fw-b price" style="color:#999" v-else>
									<text>￥</text>
									<text class="ft_24">{{item.coupon_price}}</text>
								</view> -->
								<!-- <view class="ft_12" v-if="item.limit==0">无限制</view>
								<view class="ft_12" v-else>满{{item.price_cond}}可用</view> -->
							</view>
							<view class="" style="line-height: 1.6em;" >
								<view class="ft_16 fw-b">{{item.coupon_title}}</view>
								<!-- <view class="ft_10 c-999">{{item.use_time}}</view> -->
								<view class="ft_12" >{{item.explain}}</view>
								<!-- <view class="ft_12" v-if="item.category_name">限{{item.category_name}}类商品</view> -->
							</view>
						</view>
						<u-radio-group v-model="value1">
							<u-radio active-color="#FF9101" :name="index" @change="radioChange1(item)"></u-radio>
						</u-radio-group>
					</view>
					<view class="display just_space youhq">
						<view class="display">
							不使用优惠券
						</view>
						<u-radio-group v-model="value1">
							<u-radio active-color="#FF9101" name="-1" @change="radioChange2"></u-radio>
						</u-radio-group>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        pay_types:4, //积分是1，微信是4
        infoList:[],
        allMoney:'',
        pagetype:1, //1单个商品，2.购物车列表进来
				cur2:0,
        cartId:'',
				tabbar:[
					{name:'送货服务'},
					{name:'到店自提'}
				],
				current:0,
				payTypeList: [
            /*{
						// img: '../../static/weixin.png',
						name: '奖金'
					},*/
					
					{
						// img: '../../static/weixin.png',
						name: '微信支付'
					}
				],
        fenTypeList: [
            {
          // img: '../../static/weixin.png',
          name: '积分'
        },
        ],
				payTypeList2: [
					{
						// img: '../../static/weixin.png',
						name: '小潜'
					}	
				],
				addressInfo:'', //收货地址
				shopList:[],
				shopid:7, //商品id
				guigeDetailid:83, //规格id
				num:2, //数量
				
				show:false, //优惠活动弹窗
				activity:"",//是否满减
				youhuiquan:"请选择优惠券", //选择的优惠券
				youhuiqList:"",//优惠券列表
				value1:"-1", //默认选择优惠券
				coupon_id:"",//优惠券id
				price:"",//订单金额
				payList:[ //支付方式
					{
						img:"/static/order/pay/weixin.png",
						name:0,
						type:"微信支付"
					}
				],
				value:0, //默认支付方式
				
				group_id:"", //拼团id
				username:"",// 虚拟商品收货人
				phone:"",// 虚拟商品收货手机号
				store:"",
				pricest:'',
				info:''
			}
		},
		onLoad(e) {
			uni.$on('address',res=>{ //选中地址信息
				console.log(res,'9999999');
				this.addressInfo=res
			})
      this.pagetype = e.pagetype
      console.log(this.pagetype,'his.pagetype')
			if(e.shopid && this.pagetype == 1 ){
				this.shopid=e.shopid
				this.guigeDetailid=e.ggid
				this.num=e.num
        this.getshopInfo('',this.group_id) //获取商品和地址信息
			}
      console.log(e.allCartId,`allCartId=`)
      this.cartId = e.allCartId
      if(this.cartId && this.pagetype == 2 ){
        this.$myRequest({
          url: 'api/order/cartConfirm',
          method:'POST',
          data:{
            cart_id:e.allCartId,
          }
        }).then(res => {
          console.log(res.data.data,'02020202')
          if(res.data.code==1){
            this.infoList =res.data.data.info
            this.allMoney = res.data.data.money
            this.addressInfo=res.data.data.address
          }
        })
      }
			// if(e.groupid){ //拼团id
			// 	this.group_id=e.groupid
			// }
			
			// this.pricest = uni.getStorageSync('shopPrice')


			this.getCoupn() //获取现有优惠券
		},
		onShow() {
			this.getUser()
		},
		methods: {
			getCoupn(){
				this.$myRequest({
					url: 'api/user/user_coupon',
					method:'POST',
					data:{
						type:1
					}
				}).then(res=>{
					let data=res.data.data
					if(res.data.code==1){
						this.youhuiqList=data.coupon //优惠券
					}
				})
			},
			getUser(){
				this.$myRequest({
					url: 'api/user/index',
					method:'POST',
				}).then(res => {
					console.log(res.data);
					if(res.data.code==1){
						let data=res.data.data
						this.info = data.info
					}else if(res.data.code==401){
						uni.showToast({
							icon:'none',
							title:'请先去登录'
						})
						setTimeout(function() {
							uni.navigateTo({
								url:'pages/wxLogin'
							})
						}, 1000);
					}
				})
			},
			close(index) {
				this.current = index;
			},
			getshopInfo(coupon_id,group_id){ //获取商品和地址信息
				this.$myRequest({
					url: 'api/order/confirm_goods',
					method:'POST',
					data:{
						goods_id:this.shopid,
						sku_id:this.guigeDetailid,
						num:this.num,
						coupon_id:coupon_id, //优惠券id
						group_id:group_id, //参团id
						store_id:uni.getStorageSync('store_id')
					}
				}).then(res=>{
					console.log(res.data);
					let data=res.data.data
					if(res.data.data==null){
						uni.showToast({
							icon:'none',
							title:res.data.msg
						})
						setTimeout(function() {
							uni.navigateBack({
								data:1
							})
						}, 1500);
					}
					if(res.data.code==1){
						if(data.address){
							let address=data.address //地址
							address.addresss=address.province_name+address.city_name+address.area_name+address.address
							this.addressInfo=data.address
						}
						this.pricest = data.price
						this.store = data.store
						if(data.coupon.coupon_title){
							this.youhuiquan=data.coupon.coupon_title
						}
						data.goods=Object.assign(data.goods,data.sku_product) //商品
						console.log(data.goods);
						data.goods.item_name=data.goods.item_name.replace(/;/g,' ') //去掉分号
						this.shopList=data.goods //商品信息
            if(this.shopList.category_id == 2){
              this.pay_types =1
            }else {
              this.pay_types =4
            }
						// this.price=data.sku_product.price
						
						this.activity=data.activity //满减
						
					}
				})
			},
			// getyhqInfo(){ //获取可用优惠券
			// 		this.$myRequest({
			// 			url: 'api/order/user_coupon',
			// 			method:'POST',
			// 			data:{
			// 				goods_id:this.shopid,
			// 				sku_id:this.guigeDetailid,
			// 			}
			// 		}).then(res=>{
			// 		console.log(res.data.data.coupon);
			// 		this.youhuiqList=res.data.data.coupon
			// 	})
			// },
			selectAddress(){ //选择地址
				uni.navigateTo({
					url:"../my/address/address?type="+0
				})
			},
			open(){
				console.log(this.addressInfo);
				if(this.addressInfo==''){
					uni.showToast({
						icon:'none',
						title:'请选择收货地址'
					})
					return
				}
        if(this.pagetype ==1){
           this.singledata()
        }else {
          this.dubledata()
        }

			},
      /*单个提交订单*/
      singledata(){
        if(this.shopList.type_switch!=5){ //其他商品
          this.$myRequest({
            url: 'api/order/order_goods',
            method:'POST',
            data:{
              goods_id:this.shopid, //商品id
              address_id:this.addressInfo.id, //地址id
              remark:'', //备注为空
              sku_id:this.guigeDetailid, //规格id
              num:this.num, //数量
              coupon_id:this.coupon_id, //优惠券id
              group_id:this.group_id, //拼团id
              is_distribution:this.current,//0配送，1自提
              store_id:uni.getStorageSync('store_id')
            }
          }).then(res=>{
            console.log(res.data);
            this.$all.toast(res.data.msg)
            if(res.data.code==1){
              let order_no=res.data.data.order_no
              let goods_order_no = res.data.data.goods_order_no
              this.pay(order_no,goods_order_no) //拉起支付
            }
          })
        }
        else{ //虚拟商品
          this.$myRequest({
            url: 'api/order/fictitious_order',
            method:'POST',
            data:{
              goods_id:this.shopid, //商品id
              remark:'', //备注为空
              sku_id:this.guigeDetailid, //规格id
              num:this.num, //数量
              name:this.username, //收货人
              mobile:this.phone, //收货手机号
              store_id:uni.getStorageSync('store_id')
            }
          }).then(res=>{
            console.log(res.data);
            this.$all.toast(res.data.msg)
            if(res.data.code==1){
              let order_no=res.data.data.order_no
              this.pay(order_no) //拉起支付
            }
          })
        }
      },
      /**
       * 多个提交订单
       * gai**/
      dubledata(){
        console.log('提交订单')
        console.log(this.addressInfo,'addressInfo')
        this.$myRequest({
          url: 'api/order/cartOrder',
          method:'POST',
          data:{
            cart_id:this.cartId,
            address_id:this.addressInfo.id
          }
        }).then(res => {
          console.log(res.data.data,'02020202')
          if(res.data.code==1){
            this.$all.toast(res.data.msg)
            if(res.data.code==1){
              let order_no=res.data.data.order_no
              let goods_order_no = res.data.data.goods_order_no
              this.pay(order_no,goods_order_no) //拉起支付
            }
          }
        })
      },
			pay(order_no,goods_order_no){ //拉起支付
				console.log(order_no);
				let type=''
				// // #ifndef MP-WEIXIN
				// type=2
				// // #endif
				// if(this.cur2==0){
				// 	type = 2
				// }else{
				// 	type = ''
				// }
				this.$myRequest({
						url: 'api/order/pay',
						method:'POST',
						data:{
							order_no:order_no,
							type:1,
							pay_types:this.pay_types,//this.cur2+1, //积分是1，微信是4
							type_switch:this.shopList.type_switch
						}
					}).then(res=>{
						// console.log(res.data);
						if(res.data.code==1 && this.pay_types ==4 ){
						let data=res.data.data.info
						// let pay_data = data
						// console.log(pay_data)
						// console.log(JSON.parse(data))
						// console.log(pay_data.appid);
						// uni.requestPayment({
						// 	"provider": "wxpay", 
						// 	"orderInfo": {
						// 		"appid": pay_data.appId, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
						// 		"noncestr": pay_data.nonceStr, // 随机字符串
						// 		"package": pay_data.package, // 固定值
						// 		"partnerid": pay_data.partnerid, // 微信支付商户号
						// 		"prepayid": pay_data.paySign, // 统一下单订单号 
						// 		"timestamp": pay_data.timeStamp, // 时间戳（单位：秒）
						// 		"sign": pay_data.signType // 签名，这里用的 MD5 签名
						// 	},
						// 	success(res) {
						// 		console.log(123, res)
						// 		setTimeout(function(){
						// 			uni.navigateBack({
						// 				data:1
						// 			})
						// 		},2000)
						// 	},
						// 	fail(e) {
						// 		console.log(456, e)
						// 	}
						// })
						wx.requestPayment({
							appId: data.appId,
							timeStamp:data.timeStamp,
							nonceStr: data.nonceStr,
							package: data.package,
							signType: data.signType,
							paySign: data.paySign,
							success(res1) {
								console.log(res1);
								uni.showToast({
									title:'支付成功！',
								})
								if(res1.errMsg == "requestPayment:ok"){
									setTimeout(function(){
										uni.navigateBack({
											data:1
										})
									},2000)
								}
							},
							fail(res2) { 
								console.log(res2);
								uni.showToast({
									title:'支付失败！',
									icon:'none'
								})
							}
						})
					}else{
						// let data=res.data.data.info
						uni.showToast({
							icon:'none',
							title:res.data.msg
						})
						if(res.data.code==1){
							setTimeout(function() {
								uni.navigateBack({
									data:1
								})
							}, 1000);
							
						}
					}
				})
			},
			radioChange1(item){ //选择优惠券
				console.log(item.coupon_title);
				this.youhuiquan = item.coupon_title
				this.coupon_id=item.id
				this.shopList=[] 
				this.getshopInfo(item.id,'') //获取商品和地址信息
			},
			radioChange2(e){ //不使用优惠券
				this.youhuiquan = '不使用优惠券'
				this.coupon_id=''
				this.shopList=[]
				this.getshopInfo('','') //获取商品和地址信息
			},
		}
	}
</script>

<style lang="scss">
	page{background-color: #FAFAFA;}
	.tabbar {
			width: 90%;
			height: 90rpx;
			background: #FFFFFF;
			border-radius: 8px;
			margin: 38rpx auto 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 24rpx;
			font-weight: 500;
			color: #43B77C;
			box-sizing: border-box;
			border: 1px solid #FF9101;
			view {
				width: 50%;
				height: 90rpx;
				text-align: center;
				line-height: 90rpx;
			}
		}
	.en_hover {
		background: #FF9101;
		border-radius: 8px;
		color: #FFFFFF;
	}
	.address{
		height: 162rpx;
		background-color: #fff;
		.addMy{
			width: 90%;
			margin: auto;
			display: flex;
			justify-content: space-between;
			.left{
				line-height: 162rpx;
				image{
					width: 64rpx;
					height: 64rpx;
					vertical-align: middle;
				}
			}
			.middle{
				margin-top: 40rpx;
				width: 80%;
				.top{
					font-size: 14px;
					line-height: 20px;
					color: #333333;
				}
				.btm{
					font-size: 12px;
					line-height: 25px;
					color: #999999;
				}
			}
			.right{
				line-height: 162rpx;
				font-size: 12px;
				color: #FF9101;
			}
		}
	}
	//商品
	.detailList{
		width: 90%;
		padding:0 40rpx;
		margin:20rpx auto;
		height: 660rpx;
		background: #FFFFFF;
    overflow-y: auto;
		.detailTop{
			display: flex;
			justify-content: space-between;
			width: 100%;
			border-bottom: 1px solid #F2F2F2;
			font-size: 12px;
			height: 90rpx;
			line-height: 90rpx;
			color: #333333;
		}
		.detailBtm{
			font-size: 24px;
			font-weight: bold;
			line-height: 140rpx;
			color: #333333;
			text-align: right;
			text{
				font-size: 14px;
			}
		}
		.circle_top {
			padding: 15px;
			border-top: 1px solid #F2F2F2;
			border-bottom: 1px solid #F2F2F2;
			display: flex;
			// justify-content: space-between;
			.circle_top_img image {
				width: 200rpx;
				height:200rpx;
				border-radius: 8px;
			}
			.circle_top_img {
				width: 200rpx;
				height: 200rpx;;
				margin-right: 5%;
				border-radius: 8px;
			}
			.circle_top_texts{
				font-size: 14px;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 20px;
				color: #333333;
			}
			.circle_top_text {
				font-size: 10px;
				font-weight: 400;
				line-height: 14px;
				color: #666666;
				margin-top: 10px;
			}
			.mount {

				font-size: 16px;
				font-weight: bold;
				line-height: 22px;
				color: #333333;
			}
		}
	}
  .douList{
    width: 90%;
    padding:0 40rpx;
    margin:20rpx auto;
    height: 660rpx;
    background: #FFFFFF;
    overflow-y: auto;

    .circle_top {
      padding: 15px;
      border-top: 1px solid #F2F2F2;
      border-bottom: 1px solid #F2F2F2;
      display: flex;
      // justify-content: space-between;
      .circle_top_img image {
        width: 200rpx;
        height:200rpx;
        border-radius: 8px;
      }
      .circle_top_img {
        width: 200rpx;
        height: 200rpx;;
        margin-right: 5%;
        border-radius: 8px;
      }
      .circle_top_texts{
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 20px;
        color: #333333;
      }
      .circle_top_text {
        font-size: 10px;
        font-weight: 400;
        line-height: 14px;
        color: #666666;
        margin-top: 10px;
      }
      .mount {

        font-size: 16px;
        font-weight: bold;
        line-height: 22px;
        color: #333333;
      }
    }
  }
  .douTop{
    display: flex;
    justify-content: space-between;
    width: 90%;
    margin: 0 auto;
    border-bottom: 1px solid #F2F2F2;
    font-size: 12px;
    height: 90rpx;
    line-height: 90rpx;
    color: #333333;
    background: #FFFFFF;
    padding: 0 40rpx;
  }
  .douBtm{
    padding: 0 40rpx;
    background: #FFFFFF;
    width: 90%;
    margin: 0 auto;
    font-size: 24px;
    font-weight: bold;
    line-height: 140rpx;
    color: #333333;
    text-align: right;
    text{
      font-size: 14px;
    }
  }
	//支付方式
	.drawBox{
		background-color: #fff;
		height: 200px;
		margin-bottom: 40rpx;
		.payMent{
			padding: 40rpx 0 0 40rpx;
			font-size: 16px;
			font-weight: bold;
			color: #333333;
		}
	}
	.pay-item {
		width: 90%;
		margin: auto;
		position: relative;
		margin-top: 24rpx;
		display: flex;
		align-items: center;
	
		image {
			width: 40rpx;
			height: 40rpx;
		}
	
		text {
			font-size: 28rpx;
			margin-left: 24rpx;
		}
	
		.xuan {
			position: absolute;
			right: 18rpx;
			width: 32rpx;
			height: 32rpx;
		}
	
		.noxuan {
			position: absolute;
			right: 18rpx;
			width: 32rpx;
			height: 32rpx;
		}
	}
	.vipBtm{
		display: flex;
		justify-content: space-between;
		height: 90rpx;
		line-height: 90rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
		.vipMoneys{
			width: 50%;
			padding-left: 32rpx;
			font-size: 40rpx;
			font-weight: 800;
			color: #FF0000;
			background: #FCFCFC;
		}
		.vipBtn{
			width: 50%;
			text-align: center;
			background: #FF9101;
			font-size: 24rpx;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
	.youhuiPop{
		padding: 15px;
		.title{
			padding: 20px 0;text-align: center;
		}
		.youhq{
			padding: 15px;border: 1px solid #dedede;margin-bottom: 5px;
			border-radius: 8px;
			.price{
				color: #FF9101;padding-bottom: 5px;
			}
			.shiyong{
				width: 75px;text-align: center;
				border: 1px solid #FF9101;color: #FF9101;padding: 5px 10px;border-radius: 30px;
			}
			.lingqu{
				width: 75px;text-align: center;
				background: #FF9101;color: #ffffff;padding: 5px 10px;border-radius: 30px;
			}
		}
	}
	.just_space{
		justify-content: space-between;
	}
	.p_right_10{
		padding-right: 10px;
	}
	.fw-b{
		font-weight: bold;
	}
	.ft_16{
		font-size: 16px;
	}
	.ft_10{
		font-size: 10px;
	}
	.ft_24{
		font-size: 24px;
	}
	.ft_12{
		font-size: 12px;
	}
</style>
